<template>
    <div class="transform-records">
        <ZwSearchForm :option="searchOption" @search="search" @reset="reset" />
        <ZwTable
            ref="tableRef"
            class="table-box"
            tab-h="initial"
            :option="tableOption"
            :fetch-params="state.searchParams"
            :fetch-api="fetchApi()"></ZwTable>
    </div>
</template>
<script setup lang="tsx">
import { reactive, ref, computed } from 'vue';
import ZwTable from '@/components/zw/table/Table';
import ZwSearchForm from '@/components/zw/search-form/SearchForm';
import { getDarenConvertList } from '@/api/member/pointsManage';
import { useRouter } from 'vue-router';
import { deepCopy } from '@/utils/helper';

const defaultParams = {
    member_keywords: '',
    cust_keywords: '',
    order_sn: '',
    daren_name: '',
    daren_channel_id: '',
    convert_time: []
};
const router = useRouter();

const searchOption = computed(() => {
    return [
        {
            label: '会员信息',
            name: 'member_keywords',
            type: 'input',
            clearable: true,
            placeholder: '请输入会员昵称/手机号'
        },
        {
            label: '客户信息',
            name: 'cust_keywords',
            type: 'input',
            clearable: true,
            placeholder: '请输入客户姓名/手机号'
        },
        {
            label: '订单编号',
            name: 'order_sn',
            type: 'input',
            clearable: true,
            placeholder: '请输入订单编号'
        },
        {
            label: '来源达人',
            name: 'daren_name',
            type: 'input',
            clearable: true,
            placeholder: '请输入达人名称'
        },
        {
            label: '来源渠道',
            name: 'daren_channel_id',
            value: '',
            type: 'select',
            clearable: true,
            placeholder: '全部',
            optionList: [
                { label: '全部', value: '0' },
                { label: '抖音达人', value: '21' },
                { label: '快手达人', value: '22' }
            ]
        },
        {
            label: '转换时间',
            name: 'convert_time',
            value: [],
            type: 'datePicker',
            datePickerType: 'daterange',
            datePickerFormat: 'YYYY-MM-DD HH:mm:ss',
            valueFormat: 'YYYY-MM-DD HH:mm:ss',
            startPlaceholder: '开始时间',
            endPlaceholder: '结束时间'
        }
    ];
});

const state = reactive({
    searchParams: deepCopy(defaultParams)
});
const tableRef = ref<any>(null);
const tableOption = [
    {
        prop: 'order_sn',
        label: '订单编号',
        width: 155,
        render({ row, column, index }: any) {
            return <div>{row.order_sn || '--'}</div>;
        }
    },
    {
        prop: 'daren_channel_name',
        label: '来源渠道',
        width: 100,
        render({ row, column, index }: any) {
            return <elPopoverTips content={row.daren_channel_name} />;
        }
    },
    {
        prop: 'daren_name',
        label: '来源达人',
        width: 110,
        render({ row, column, index }: any) {
            return <div>{row.daren_name || '--'}</div>;
        }
    },
    {
        prop: 'actually_amount',
        label: '实付金额',
        width: 120,
        render({ row, column, index }: any) {
            return <div>￥{row.actually_amount || '--'}</div>;
        }
    },
    {
        prop: 'points',
        label: '积分',
        minWidth: 120,
        render({ row, column, index }: any) {
            return <div>{row.points || '--'}</div>;
        }
    },
    {
        prop: 'member_info',
        label: '归属会员',
        minWidth: 200,
        render({ row, column, index }: any) {
            if (row?.member_info?.mobile && row?.member_info?.nickname) {
                return (
                    <div class="custom-member-jump" onClick={() => handlerDetail(row?.member_info)}>
                        {row?.member_info?.nickname}（{row?.member_info?.mobile}）
                    </div>
                );
            }
            if (!row?.member_info?.mobile && !row?.member_info?.nickname) {
                return <div>--</div>;
            }
            return (
                <div class="custom-member-jump" onClick={() => handlerDetail(row?.member_info)}>
                    {row?.member_info?.nickname || row?.member_info?.mobile}
                </div>
            );
        }
    },
    {
        prop: 'cust_info',
        label: '关联客户',
        minWidth: 200,
        render({ row, column, index }: any) {
            if (row?.cust_info?.mobile && row?.cust_info?.name) {
                return (
                    <div class="custom-member-jump" onClick={() => handlerCustDetail(row?.cust_info)}>
                        {row?.cust_info?.name}（{row?.cust_info?.mobile}）
                    </div>
                );
            }
            if (!row?.cust_info?.mobile && !row?.cust_info?.name) {
                return <div>--</div>;
            }
            return (
                <div class="custom-member-jump" onClick={() => handlerCustDetail(row?.cust_info)}>
                    {row?.cust_info?.name || row?.cust_info?.mobile}
                </div>
            );
        }
    },
    {
        prop: 'convert_time',
        label: '转换时间',
        width: 170,
        render({ row, column, index }: any) {
            return <div>{row.convert_time || '--'}</div>;
        }
    }
];

const handlerDetail = (val: any) => {
    // 跳转会员详情
    if (!val.member_no) {
        return;
    }
    window.open(`/member/memberManage/memberList/detail?member_no=${val.member_no}`);
};

const handlerCustDetail = (val: any) => {
    // 跳转客户详情
    if (!val.id) {
        return;
    }
    window.open(`/customer/manage/list/detail?id=${val.id}&type=1`);
};

const search = (data: any) => {
    const member_no = state.searchParams.member_no;
    tableRef.value.getTable().clearSelection();
    state.searchParams = deepCopy({ ...defaultParams, ...data, member_no });
};

const reset = () => {
    const member_no = state.searchParams.member_no;
    tableRef.value.getTable().clearSelection();
    state.searchParams = deepCopy({ ...defaultParams, member_no });
};

const fetchApi = () => {
    return getDarenConvertList;
};
</script>
<style lang="scss" scoped src="./index.scss"></style>
